<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/expenseOtherReport'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="paging" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="年月份：">
                        <el-date-picker v-model="paging.date" type="month" placeholder="选择年月" format="yyyy-MM"
                            value-format="yyyy-MM"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="repairGetList()" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border ref="multipleTable" show-summary :summary-method="getSummaries">
                    <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
                    <el-table-column type="index" width="100px" label="序号" align="center"></el-table-column>
                    <el-table-column prop="title" label="代垫款名称" align="center"> </el-table-column>
                    <el-table-column prop="price" label="代垫款金额" align="center"> </el-table-column>
                    <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
                </el-table>
                <!-- <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[100, 200, 300, 400]" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total"> </el-pagination>
                </div> -->
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            paging: {
                store_title: '',
                date: '',
                page: 1,
                total: 0,
                limit: 100,
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/expenseOtherReport') {
            this.paging.date = this.$moment(new Date()).format('YYYY-MM');
            this.handleCurrentChange(1);
        }
    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (column.property == 'price') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
        async setRow(type, row) {
            this.utils.goUrl(`/expenseInfo?store_id=${row.store_id}&date=${row.pay_date}&type=${type}`);
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getExpenditureOther(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.date = '';
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>
